<template>
  <div class="user-container">
    <div class="search">
      <my-input @search="handleSearch"></my-input>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.user_avatar" alt class="avatar" />
          </template>
          <img src alt />
        </el-table-column>
        <el-table-column prop="user_nickname" label="小朋友名称"></el-table-column>
        <el-table-column prop="user_birthday" label="小朋友生日"></el-table-column>
        <el-table-column prop="user_sex" label="小朋友性别"></el-table-column>
        <el-table-column prop="user_phone" label="绑定手机号"></el-table-column>
        <el-table-column prop="user_zone" label="区域"></el-table-column>
        <el-table-column prop="register_time" label="注册时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="delete"
              @click="handleForbbiden(scope)"
            >{{tableData[scope.$index].is_locked === 1 ? '启用' : '禁用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      :pageSize="pageSize"
      :total="total"
      class="pagination"
      @currentChange="currentChange"
    ></Pagination>
  </div>
</template>
<script>
import MyInput from "@/common/input/index";
import { getUserList, forbidden } from "@/api/operation";
import { ERR_OK } from "@/api/config";
import Pagination from "@/common/pagination/pagination";
import { Message } from "element-ui";
export default {
  components: {
    MyInput,
    Pagination
  },
  data() {
    return {
      tableData: [],
      pageSize: 15,
      total: 0,
      page: 1,
      keyword: "",
      forbiddenScope: ""
    };
  },
  methods: {
    handleForbbiden(scope) {
      // console.log(scope)
      forbidden(scope.row.id)
        .then(res => {
          if (res.code == ERR_OK) {
            // console.log(this.tableData[scope.$index].is_locked);
            this.tableData[scope.$index].is_locked =
              this.tableData[scope.$index].is_locked === 1 ? 0 : 1;
            Message({
              message: res.message,
              type: "info"
            });
            // console.log(234234234);
          }
        })
        .catch(err => {
          Message({
            message: err.message,
            type: "info"
          });
        });
    },
    handleSearch(keyword) {
      this.page = 1;
      this.keyword = keyword;
      this._getUserList(this.pageSize, this.page, this.keyword);
    },
    currentChange(val) {
      this.page = val;
      this._getUserList(this.pageSize, this.page, this.keyword);
    },
    _getUserList(pageSize, page, search) {
      getUserList(pageSize, page, search)
        .then(res => {
          if (res.code == ERR_OK) {
            let ret = res.data.list;
            this.total = res.data.list_num;
            this.tableData = ret;
            // console.log(res.data.list_num);
            console.log(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._getUserList();
  }
};
</script>
<style lang="scss" scoped>
@import "@/common/scss/index.scss";
.user-container {
  padding-top: 50px;
}
.table {
  padding: 20px;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
.delete {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
}
.table /deep/ .has-gutter {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
}
.pagination {
  @include hCenter();
  bottom: 0;
  background: #fff;
  z-index: 99;
}
</style>